<template>
  <el-dialog
    v-model="visible"
    title="活动参与者"
    :close-on-click-modal="false"
    style="width: 80%;"
  >
    <div class="mod-activityEnrollments">
      <avue-crud
        ref="crudRef"
        :page="page"
        :data="dataList"
        :table-loading="dataListLoading"
        :option="tableOption"
        @search-change="onSearch"
        @on-load="getDataList"
        @refresh-change="refreshChange"
        @selection-change="selectionChange"
      >
      </avue-crud>
    </div>
  </el-dialog>
</template>

<script setup>
import { tableOption } from '@/crud/activity/activityEnrollments.js'
const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
const dataListLoading = ref(false)
const visible = ref(false)
const parentId = ref(null)
/**
 * 获取数据列表
 */
const init = (id) => {
  visible.value = true
  parentId.value = id
}
defineExpose({ init })

const getDataList = (pageParam, params, done) => {
  dataListLoading.value = true
  http({
    url: http.adornUrl('/admin/activityEnrollments/page'),
    method: 'get',
    params: http.adornParams(Object.assign({
      current: pageParam ? pageParam.currentPage : 1,
      size: pageParam ? pageParam.pageSize : 20
    }, params, {activityId: parentId.value}))
  })
    .then(({ data }) => {
      page.total = data.total
      page.pageSize = data.size
      page.currentPage = data.current
      dataList.value = data.records
      dataListLoading.value = false
      if (done) done()
    })
}
const dataListSelections = ref([])
/**
 * 多选回调
 * @param list
 */
const selectionChange = (list) => {
  dataListSelections.value = list
}

/**
 * 点击查询
 */
const onSearch = (params, done) => {
  getDataList(page, params, done)
}

const refreshChange = () => {
  getDataList(page)
}
</script>
